<template>
    <div class="home-recommend">
        <div class="recommend-title">热门景点推荐</div>
        <ul class="recommend-list">
            <!-- :to根据点击的城市的id，链接到不同的页面，在router中与:id动态绑定 -->
            <router-link
            tag= "li"
            class="recommend-list-container border-bottom"
            v-for= 'item in recommendList'
            :key= 'item.id'
            :to= '"/detail/" + item.id'
            >
                <div>
                    <img class="recommend-img" :src= "item.imgUrl">
                </div>
                <div class="recommend-info">
                    <p class="recommend-info-title">{{item.title}}</p>
                    <p class="recommend-info-desc">{{item.desc}}</p>
                    <button class="recommend-info-btn">查看详情</button>
                </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'home-recommend',
    data() {
        return {
        }
    },
    props: {
        recommendList: Array
    }
}
</script>

<style lang= "stylus" scoped>
@import '../../../assets/styles/maxins.styl';
*
    margin 0
    padding 0
    box-sizing border-box
    .recommend-title
        text-indent .2rem
        background #eee
        line-height .8rem
        font-size .32rem
        margin-bottom .1rem
    .recommend-list-container
        overflow hidden
        display flex
        height 1.9rem
        .recommend-img
            margin-bottom .1rem
            height 1.8rem
            width 2.7rem
            margin-right .1rem
        .recommend-info
            flex 1
            padding-top .2rem
            overflow hidden
            /* overflow hidden 用来触发ellipsis(),因为没有设置宽度，也可以直接设置宽度*/
            .recommend-info-title
                line-height .4rem
            .recommend-info-desc
                line-height .4rem
                color #ccc
                ellipsis()
            .recommend-info-btn
                margin-top .15rem
                background #ff9300
                color #fff
                border-radius .06rem
                line-height .4rem
                padding .05rem .1rem
</style>
